<template>
  <!-- 通知下发 -->
  <h-modal class="event-modal" v-model="show" title="通知下发" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="24">
          <a-form-model-item label="通知内容" prop="content">
            <a-textarea size="large" v-model="form.content" placeholder="请输入通知内容" :rows="4"></a-textarea>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="新闻页内容" prop="link">
            <!-- <a-checkbox v-model="checked">生成超链接</a-checkbox> -->
            <a-textarea size="large" v-model="form.link" placeholder="请输入链接" :rows="2"></a-textarea>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="请选择下发人员">
            <a-input v-model="temp" style="display: none"></a-input>
            <a-input-search placeholder="关键词搜索" style="width: 300px" v-model="params.search" enter-button @search="search" />
            <div>
              已选择人员：
              <a-tag closable @close="deleteUser(item)" v-for="(item, i) in selectedRow" :key="i">{{ item.realname }}</a-tag>
            </div>
            <h-table
              ref="htable"
              @init="getList"
              :config="config"
              :showHeadBgNone="false"
              :zebraStripes="false"
              showRowSelection
              @select="select">
              <span slot="avatar" slot-scope="{text}">
                <a-avatar :src="text" :size="36"></a-avatar>
              </span>
            </h-table>
          </a-form-model-item>

        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { queryUnitByType, addNotice } from '@/api/serve';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      checked: false,
      show: false,
      form: {
        userIdList: []
      },
      rules: {
        content: [{ required: true, message: '请输入' }],
        link: [{ required: false, message: '请输入' }],
        userIdList: [{ required: true, message: '请输入' }]
      },
      selectedRow: [],
      config: {
        rowKey: 'id',
        bordered: true,
        size: 'small',
        dataSource: [],
        pagination: {
          total: 0
        },
        columns: [
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'realname'
          },
          {
            align: 'center',
            title: '地区',
            dataIndex: 'address'
          },
          {
            align: 'center',
            title: '部门',
            dataIndex: 'depart'
          },
          {
            align: 'center',
            title: '联系电话',
            dataIndex: 'mobile'
          }
        ]
      },
      params: {
        search: ''
      },
      temp: ''
    };
  },
  methods: {
    getList(params) {
      queryUnitByType({ ...params, ...this.params }).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
      });
    },
    select({ selectedRowKeys, selectedRow }) {
      this.form.userIdList = selectedRowKeys;
      this.selectedRow = selectedRow;
      this.temp = selectedRowKeys.join(',');
    },
    search() {
      this.$refs.htable.refresh(true);
    },
    clear() {
      this.form = {
        userIdList: []
      };
      this.temp = '';
    },
    deleteUser({ id }) {
      const indexs = this.selectedRow.findIndex(e => e == id);
      if (indexs > -1) this.selectedRow.splice(indexs, 1);
      const index = this.form.userIdList.findIndex(e => e == id);
      // const indexRow = this.form.userIdList.findIndex(e => e.id == id);
      if (index > -1) this.form.userIdList.splice(index, 1);

      this.temp = this.form.userIdList.join(',');
    },
    submit() {
      if (!this.form.userIdList.length) {
        this.$message.error('请选择下发人员');
        return;
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addNotice(this.form).then(res => {
            this.show = false;
            this.$message.success('创建成功');
            this.clear();
            this.$refs.htable.cancel();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>

</style>
